import { cascadersSource } from '@/services/api/api-monitor-source';
import {
  pageMonitorVideo,
  pageMonitorVideoRecordStatistics,
} from '@/services/api/api-monitor-video';
import type { ActionType, FormInstance } from '@ant-design/pro-components';
import {
  LightFilter,
  ProFormCascader,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { useAccess } from 'umi';
import { Cascader, Input } from 'antd';
import moment from 'moment';
import { useEffect, useRef, useState } from 'react';
import DetailMonitorVideo from './DetailMonitorVideo';
import ProList from '@ant-design/pro-list';
import { listAuditSource, pageMonitorhcRecord } from '@/services/api/api-monitor-article';
interface PageContainerMonitorVideoProps {}

const PageContainerMonitorVideo: React.FC<PageContainerMonitorVideoProps> = (props) => {
  const access = useAccess();

  const [width, setWidth] = useState(500);

  const actionRef = useRef<ActionType>();
  const formRef = useRef<FormInstance>();

  const [optionsCascadersSourceData, setOptionsCascadersSourceDataState] = useState<
    { label: string; value: string; datahubChannelId: string }[]
  >([]);
  const [listAuditSourceData, setListAuditSourceDataState] = useState<
    { label: string; value: string; datahubChannelId: string }[]
  >([]);

  const [pageMonitorVideoRecordStatisticsData, setPageMonitorVideoRecordStatisticsDataState] =
    useState<MonitorVideoData.VideoRecordPageStatistics[]>([]);

  /**
   * 搜索参数
   */
  const [queryParam, setQueryParamState] = useState({
    datahubChannelIds: [
      '8117112412962886',
      '8117112414994505',
    ],
  });
  const loadListAuditSource = async () => {
    const res = await listAuditSource({
      datahubChannelIds: [
        '8117112412962886',
        '8117112414994505',
      ],
    });
    if (res.code === 0) {
      console.log(res.data);
      const option =
        Array.isArray(res.data) &&
        res.data.map((item) => {
          return {
            label: item.name,
            value: item.datahubSourceId,
            datahubChannelId: item.datahubChannelId,
          };
        });
      setOptionsCascadersSourceDataState(option);
      setListAuditSourceDataState(option);
    }
  };

  useEffect(() => {
    loadListAuditSource();
  }, []);
  // const loadPageMonitorVideoRecordStatistics = async (queryParam: any) => {
  //   const response = await pageMonitorVideoRecordStatistics(queryParam);
  //   if (response.code == 0) {
  //     setPageMonitorVideoRecordStatisticsDataState(response.data);
  //   }
  // };
  // useEffect(() => {
  //   // loadPageMonitorVideoRecordStatistics({});
  // }, []);
  return (
    <>
      <Input.Search
        placeholder="查询标题"
        enterButton="搜索"
        allowClear
        style={{ maxWidth: 522, width: '100%' }}
        onChange={(e) => {
          setQueryParamState({ ...queryParam, dataName: e.target.value });
        }}
        onSearch={(value) => {
          actionRef.current?.reset();
        }}
      />
      <LightFilter
        // initialValues={{ run: 2 }}
        style={{ marginTop: 5 }}
        onValuesChange={(value) => {
          if (value.time === '今天') {
            value.time = [moment(), moment()];
          } else if (value.time === '本月') {
            value.time = [moment().startOf('month'), moment().endOf('month')];
          } else if (value.time === '上月') {
            value.time = [
              moment().startOf('month').subtract(1, 'months'),
              moment().endOf('month').subtract(1, 'months'),
            ];
          } else if (value.time === '最近7天') {
            value.time = [moment().subtract(6, 'days'), moment()];
          } else if (value.time === '最近60天') {
            value.time = [moment().subtract(59, 'days'), moment()];
          } else if (value.time === '最近90天') {
            value.time = [moment().subtract(89, 'days'), moment()];
          }
          const datahubChannelIds = [];
          const datahubSourcelds = [];
          console.log(value);

          if (value.datahubChannel) {
            if (value.datahubChannel === '全部') {
              datahubChannelIds.push(
                ...[
                  '8117112412962886',
                  '8117112414994505',
                ],
              );
            } else {
              datahubChannelIds.push(value.datahubChannel);
            }
          }
          if (value.datahubChannelId) {
            datahubSourcelds.push(value.datahubChannelId);
          }
          if (value.releaseTimes) {
            value.startTime = value.releaseTimes[0];
            value.endTime = value.releaseTimes[1];
          }
          value.datahubChannelIds = datahubChannelIds;
          value.datahubSourcelds = datahubSourcelds;
          setQueryParamState({ ...queryParam, ...value });
          actionRef.current?.reset();
        }}
      >
        <ProFormSelect
          name="datahubChannel"
          placeholder="请选择平台"
          options={[
            { label: '全部', value: '全部' },
            {
              label: '抖音',
              value: '8117112414994505',
            },
            { label: '微信视频号', value: '8117112412962886' },
            { label: '快手', value: '全部' },
          ]}
          fieldProps={{
            allowClear: false,
            onChange: (value) => {
              formRef.current?.setFieldValue('datahubChannelId', '');

              if (value === '全部') {
                setOptionsCascadersSourceDataState(listAuditSourceData);
              } else {
                setOptionsCascadersSourceDataState(
                  listAuditSourceData.filter((item) => item.datahubChannelId === value),
                );
              }
            },
          }}
        />
        <ProFormDateRangePicker
          name="releaseTimes"
          label="选择发布时间"
          allowClear
          fieldProps={{
            allowClear: true,
            placeholder: ['开始日期', '结束日期'],
            format: 'YYYY-MM-DD',
            popupStyle: { width: 100 },
          }}
        />
        {/* <ProFormSelect
          options={optionsCascadersSourceData}
          name="datahubChannelId"
          fieldProps={{
            options: optionsCascadersSourceData,
            style: {
              width: (width / 3) * 1.95,
            },
            removeIcon: true,
            allowClear: false,
            showSearch: true,
            maxTagCount: 'responsive',
            onChange(value, selectOptions) {
              formRef.current?.setFieldValue('datahubChannel', '');
            },
          }}
        /> */}
      </LightFilter>
      <ProList<MonitorArticleData.RecordPage>
        header={false}
        headerTitle={false}
        ghost={true}
        pagination={{
          defaultPageSize: 8,
          showSizeChanger: false,
          showTotal: false,
          style: { textAlign: 'center' },
        }}
        className="topicRender"
        style={{ marginTop: 10 }}
        actionRef={actionRef}
        request={async (params, sort, filter) => {
          const response = await pageMonitorhcRecord({
            ...params,
            ...queryParam,
          });
          return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
          });
        }}
        showActions="hover"
        grid={{ gutter: 18, column: 1 }}
        onItem={(record: any) => {
          return {
            onMouseEnter: () => {},
            onClick: () => {},
          };
        }}
        renderItem={(item: MonitorArticleData.RecordPage, index: number) => {
          return (
            <DetailMonitorVideo
              isLinkage={false}
              data={item}
              onRefurbish={() => {
                actionRef.current?.reload;
              }}
              triggerMode="card"
            />
          );
        }}
        rowKey={'id'}
        toolBarRender={false}
      />
    </>
  );
};

export default PageContainerMonitorVideo;
